<template>
    <!-- 网格列表 -->
    <uni-grid :column="column" :highlight="true" :showBorder="false">
        <uni-grid-item v-for="(item, index) in list" :index="index" 
            :key="index" style="margin-bottom: 20rpx;">
            <view class="grid-item-box">
                <!-- 2.绑定地址：注意src与name一定要与mock.js中图片地址与音乐名称的键值对键名相同。 -->
                <image :src="item.src" mode="aspectFill"></image>
                <text class="text">{{item.name}}</text>
            </view>
        </uni-grid-item>
    </uni-grid>
</template>


<script>
export default {
    name: "MusicListComponent",
    data() {
        return {
            
        };
    },
    // 1.子组件参数定义
    props: {
        column: {
            type: Number,
            required: true
        },
        list: {
            type: Array,
            required: true,
            validator: function(value) { // 非必须，若是有自信确保数据正确
                // 1.检查value是否为数组，如果不是则返回false
                if (!Array.isArray(value)) {
                    return false
                }
                // 2.遍历数组中的每个元素，检查它们是否都包含
                // 歌曲图片'src' 和 歌曲名称'name' 属性
                for (let i = 0; i < value.length; i++) {
                    // 3.缺少 歌曲图片'src' 或 歌曲名称'name' 属性，则返回false
                    if (!value[i].src || !value[i].name) return false;
                }
                // 4.验证通过
                return true;
            }
        }
    }
}
</script>


<style lang="scss">
    .grid-item-box {
        width: auto;
        height: auto;
    }

    image {
        width: 100%;
        height: 200rpx;
    }
</style>
